<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    width="100%"
    :visible="visible"
    @close="onClose"
  >
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="基本信息">
        <basic-information ref="basicInformation" :record="model"></basic-information>
      </a-tab-pane>
      <a-tab-pane key="2" tab="系统信息">
        <system-info ref="followRecord" :record="model"></system-info>
      </a-tab-pane>
      <a-tab-pane key="3" tab="跟进记录">
        <follow-record ref="systemInfo" :record="model"></follow-record>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script>

  import basicInformation from "./tabs/basicInformation";
  import followRecord from "./tabs/followRecord";
  import systemInfo from "./tabs/systemInfo";

  export default {
    name: "materialDetailModal",
    components:{
      basicInformation,followRecord,systemInfo
    },
    data() {
      return {
        visible: false,
        title: "",
        model:{},
      }
    },
    methods: {
      callback(key) {
        console.log(key);
      },
      showDrawer(record) {
        this.visible = true;
        this.model = record;
      },
      onClose() {
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>